<div class="layuimini-main" style="padding-left: 40px">

    <div class="layui-form layui-form-pane">
        <fieldset class="layui-elem-field  layui-field-title">
            <legend>SEO 设置</legend>
        </fieldset>
        <div class="layui-form-item">
            <input type="hidden" name="id" value="{{ $data['info']['id'] }}">
            <label class="layui-form-label required">SEO标题</label>
            <div class="layui-input-block">

                <input type="text" name="title" lay-verify="required" lay-reqtext="Title 不能为空" autocomplete="off" placeholder="SEO title"
                       value="{{ $data['info']['title'] }}" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">关键词</label>
            <div class="layui-input-block">
                <input type="text" name="keywords" value="{{ $data['info']['keywords'] }}" lay-verify="required" lay-reqtext="Title 不能为空"
                       autocomplete="off" placeholder="SEO keywords" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label required">SEO Description</label>
            <div class="layui-input-block">
                <textarea name="description" class="layui-textarea" placeholder="SEO Description 长度不超过200个字符">{{ $data['info']['description'] }}</textarea>
            </div>
        </div>

        <fieldset class="layui-elem-field layui-field-title">
            <legend>产品信息设置</legend>
        </fieldset>
        <div class="layui-form-item">
            <label class="layui-form-label">新闻分类</label>
            <div class="layui-input-block">
                <label>
                    <select name="news_type">
                        <option value="2">新闻</option>
                    </select>
                </label>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">新闻标题</label>
            <div class="layui-input-block">
                <input type="text" name="news_title" lay-verify="required" lay-reqtext="新闻标题不能为空"
                       value="{{ $data['info']['news_title'] }}" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label required">新闻摘要</label>
            <div class="layui-input-block">
                <textarea name="abstract" class="layui-textarea" placeholder="摘要长度不超过200个字符">{{ $data['info']['abstract'] }}</textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">新闻缩略图</label>
            <div class="layui-input-block">
                <div class="layui-upload">
                    <button type="button" class="layui-btn" id="img">上传图片</button>
                    <input type="text" disabled="disabled" name="img"  value="{{ $data['info']['img'] }}"
                           style="float: left; width: 50%;" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-upload-list" >
                <img class="layui-upload-img" id="upload_img_demo" src="{{ $data['info']['img'] }}" style="border: 1px solid #cccccc">
                <p id="demo_text"></p>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">新闻轮播图</label>
{{--            <input type="hidden" disabled="disabled" name="banner"  value="" autocomplete="off" class="layui-input">--}}
            <div class="layui-input-block">
                <div class="layui-upload">
                    <button type="button" class="layui-btn" id="banner">多图片上传</button>
                    <input type="text" disabled="disabled" name="banner" style="float:left; width: 50%;"
                           value="{{ $data['info']['banner'] }}" autocomplete="off" class="layui-input">
                </div>
            </div>
            <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                预览图：
                <div class="layui-upload-list" id="slider_show">
                    @foreach( $data['info']['banners'] as $v )
                        <span style="position: relative;width: 200px;height: 200px" class="imgs">
                            <img style="width: 200px;" src="{{ $v }}" alt="" class="layui-upload-img">
                            <i class="layui-icon" title="移除图片" style="color: #ff0000;font-size: 60px; position: absolute;top:0 ; right: 40%;cursor: pointer;  "></i>
                            </span>
                    @endforeach

                </div>
            </blockquote>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">产品内容</label>
            <div class="layui-input-block">
                <textarea name="content" id="content" cols="30" rows="10">{!! $data['info']['content'] !!}</textarea>
                <script src="{{ asset('/admin/lib/tinymce/tinymce.min.js') }}"></script>
                <script>
                    tinymce.init({
                        selector:'#content',
                        language:'zh_CN',
                        plugins: 'print preview searchreplace autolink directionality visualchars fullscreen image link media template code table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount imagetools textpattern paste emoticons  autoresize',
                        toolbar: 'code forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright indent2em lineheight | \
                    bullist numlist | blockquote subscript superscript removeformat | \
                    table image media  emoticons charmap hr pagebreak insertdatetime | fullscreen ',
                        menubar:false,
                        fontsize_formats: '12px 14px 16px 18px 24px 36px 48px 56px 72px',
                        autosave_ask_before_unload: false,
                        toolbar_drawer : false,
                        // 图片上传
                        images_upload_url: '/admin/upload/edit',
                    })
                </script>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
            </div>
        </div>
    </div>
</div>
<script>
    layui.use(['form', 'iconPickerFa','upload','miniUpload'], function () {
        var form = layui.form,
            layer = layui.layer,
            miniUpload = layui.miniUpload,
            $ = layui.$;
        var miniPage = layui.miniPage;

        /**
         * 初始化表单，要加上，不然刷新部分组件可能会不加载
         */
        form.render();
        // 上传缩略图
        miniUpload.uploadImg('img', 'upload_img_demo');
        //多图片上传
        miniUpload.uploadImages('banner', 'slider_show');
        // 当前弹出层，防止ID被覆盖
        var parentIndex = layer.index;
        //监听提交
        form.on('submit(saveBtn)', function (data) {
            data.field.content = tinymce.get('content').getContent();
            layer.load(2);
            $.ajax({
                url: 'news/' + data.field.id,
                method: 'PUT',
                data: data.field,
                success: function (res) {
                    layer.closeAll('loading');
                    if (res.code === 0) {
                        layer.msg('保存成功', {icon: 1, time: 2000}, function () {
                            layer.close(parentIndex);
                            // 刷新列表
                            var options = {};
                            options.homeInfo = options.homeInfo || {};
                            miniPage.refresh(options);
                        })
                    } else {
                        layer.msg(res.msg, {icon: 5})
                    }
                },
                error: function (res) {
                    layer.msg('请求错误', {icon: 5})
                }
            });
            return false;
        });

    });
</script>
